<template>
    <div class="mainContent">
        <path-tracking :path='path' />
        <div class="pageContent">
            <div style="border-radius: 8px;overflow: hidden;">
                <basic-infos 
                    ref="basicInfo"
                    origin="server"
                    pageType='create'
                    @phone_check="phone_check"
                />
                
                <custom-tag 
                    ref="customTag"
                    title='客户标签'
                    :hasScore='false'
                    :disabled="disabled"
                    pageType="create"
                />
    
                <div class="tableTitle">
                    <div class="tableIcon"></div>
                    <div class="tableText">备注：</div>
                </div>
                <div class="bgBox">
                    <div style="padding-bottom: 1rem;">
                        <el-input type='textarea' rows="5" style="width: 100%;resize: none;" v-model="remarks" :disabled="disabled">

                        </el-input>
                    </div>
                </div>
                <!-- 按钮 -->
                <div class="btnsCan">
                    <div class="btnLayout">
                        <div class="btn" @click="doSave(4)">审核通过</div>
                        <div class="btn" @click="verifyFiled">审核失败</div>
                        <div class="btn cancel" @click="doCancel">取消</div>
                        <!-- <div class="btn" @click="doSave(1)">保存</div> -->
                    </div>
                </div>
            </div>
        </div>
        <verify-filed-popup 
            ref="verifyPopup"
            @doSave="doSave"
        />
    </div>
</template>
<script>
    import datas from '../datas.js'
    import pathTracking from '@/components/common/pathTracking'
    import advancedSearch from '@/components/common/filter/advancedSearch.vue'
    import customTag from '../../component/customTag'
    import verifyFiledPopup from '../verifyFiledPopup'
    import basicInfos from '../../component/basicInfos'
    import { createOrder, getFollowUpList, findStaffByName } from '../axios.js'
    import { getDetail } from '../../component/seeDetail/axios.js'
    import { DRcookie } from '@/assets/js/common.js'
    import verifyResult from '../../component/verifyResult'
    export default {
        name: 'operateOrder',
        data() {
            return {
                path: ['CRM', '预约管理', {label: '预约审核', name: 'bookedCustomer'}, ''],
                dialogView: false,
                // input配置
                scheduleOption: datas.createScheduleOption,
                // 之前的数据
                previousData: '',
                remarks: '',
                followUpBy: '',
                followUpList: [],
                loading: false,
                saving: false,
                disabled: true
            }
        },
        components: {
            verifyFiledPopup,
            advancedSearch,
            pathTracking,
            verifyResult,
            basicInfos,
            customTag
        },
        methods: {
            // 存
            doSave(status, failedReason) { 
                // 详细信息
                let basicInfo = this.$refs.basicInfo.getResult();
                // 标签
                let tags = this.$refs.customTag.getResult();
                if(!basicInfo || !tags) {
                    return
                }
                basicInfo.status = status
                // 客户标签
                basicInfo.systemTagCategoryVO = tags;
                basicInfo.followUpRecords = [];
                basicInfo.promotionSource = this.getDep();

                // 备注
                let obj = {
                    content: this.remarks, 
                    type: 1
                }
                if(!/^[ ]*$/.test(this.remarks)) {
                    basicInfo.followUpRecords.push(obj);
                }
                // 创建预约时审核失败需要添加原因
                failedReason && basicInfo.followUpRecords.push({
                    content: failedReason,
                    type: 2
                })

                // 客服创建的就是1，到店就是2
                basicInfo.type = 1;
                // 新增
                createOrder(basicInfo).then(res => {
                    if(res.data.status === 200) {
                        this.$message({
                            showClose: true,
                            message: '新增预约成功',
                            type: 'success'
                        });
                        this.sucCallback()
                    }else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'warning'
                        })
                    }
                }).catch(err => {
                    console.log('err: ', err)
                })
            },
            getDep() {
                let department = DRcookie.get('department')
                if(department) {
                    return `${department}`
                }else {
                    return ''
                }
            },
            sucCallback() {
                this.saving = true;
                this.remarks = '';
                this.clearInputs();
                this.$router.replace({name: 'bookedCustomer'})
            },
            doCancel() {
                this.clearInputs();
                this.$router.push({path: '/crm/bookedCustomer'})
            },
            changePageType() {
                // 切换了页面，不再保存数据
                // this.pageType !== this.$route.query.pageType && this.clearInputs();
                this.path.splice(3, 1, '创建预约');
            },
            // 清空输入框中的内容
            clearInputs() {
                this.$refs.basicInfo.clearInput();
                this.$refs.customTag.clearInput();
            },
            // 审核失败
            verifyFiled() {
                let basicInfo = this.$refs.basicInfo.getResult();
                if(!basicInfo) {
                    return
                }
                // 标签
                let tags = this.$refs.customTag.getResult();
                if(!basicInfo) {
                    return
                }
                this.$refs.verifyPopup.openBox();
            },
            // 获取详情分发数据
            getDetail() {
                let searchKey = this.$route.query.searchKey
                searchKey && getDetail(searchKey).then(res => {
                    if(res.data.status === 200) {
                        this.previousData = res.data.result;
                        // 显示上次的跟进人
                        this.followUpBy = res.data.result.supportStaff
                        // 给组件数据
                        this.$refs.basicInfo.dispatchData(res.data.result)
                        this.$refs.customTag.dispatchData(res.data.result)
                    }
                }).catch(err => {
                    console.log('err: ', err)
                })
            },
            // 获取跟进人列表
            getFollowUp() {
                getFollowUpList().then(res => {
                    if(res.data.status === 200) {
                        let arr = [{
                            label: '请选择创建人',
                            value: undefined
                        }]
                        res.data.result.map(ele => {
                            arr = arr.concat(ele.supportStaffs)
                        })
                        this.followUpList = arr
                    }
                }).catch(err => {
                    console.log('err: ', err)
                })
            },
            remoteMethod(clue) {
                findStaffByName(clue).then(res => {
                    console.log('res: ----->', res);
                    if(res.data.status === 200) {
                        let arr = []
                        res.data.result.map(ele => {
                            arr = arr.concat(ele.supportStaffs)
                        })
                        this.followUpList = arr
                    }
                }).catch(err => {
                    console.log('err: ', err)
                })
            },
            phone_check(status) {
                this.disabled = status
            }
        },
        // beforeRouteLeave (to, from, next) {
        //     this.saving
        //     ?
        //     next()
        //     :

        //     this.$confirm('离开后将不会保存已填内容，确定离开么?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消'
        //     }).then(() => {
        //         next() 
        //     }).catch(() => {
        //         PSEvent.trigger('adjust_menu')
        //     });
        // },
        activated() {
            this.changePageType()   
        }
    }
</script>
<style scoped>
    .pageContent{
        padding: 16px;
        min-width: 58rem;
    }
    .tableTitle{
        height: 4rem;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        background: #FFF;
    }
    .tableIcon{
        width: .4rem;
        margin-left: 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tableText{
        height: 100%;
        line-height: 4rem;
        margin-left: 0.4rem;
        font-size: 14px;
        font-weight: bold;
        color: #715D4A;
    }
    .couple{
        width: 30rem;
        display: flex;
        height: 4rem;
        font-size: 1.4rem;
        align-items: center;
        justify-content: center;
        color: #222222;
    }
    .lines{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .btnsCan{
        background: #FFF;
        padding: 1.5rem 0;
    }
    .btnLayout{
        text-align: center;
    }
    .btn{
        display: inline-block;
        width: 120px;
        height: 40px;
        border-radius: 20px;
        background: #7e6b5a;
        text-align: center;
        line-height: 40px;
        color: #FFF;
        font-size: 14px;
        cursor: pointer;
        margin: 0 8px;
    }
    .cancel{
        background: #000;
    }
    .bgBox{
        background: #FFF;
        padding: 0 2.4rem;
    }
</style>